<template>
  <el-submenu v-if="item.child && item.child.length" :index="navIndex">
    <!-- 创建父级菜单 -->
    <template slot="title">{{ item.name }}</template>
    <!-- 创建子菜单 -->
    <nav-item
      v-for="(subItem,i) in item.child"
      :key="navIndex+'-'+i"
      :navIndex="navIndex+'-'+i"
      :item="subItem" >
    </nav-item>
  </el-submenu>

  <el-menu-item v-else :index="item.path">{{ item.name }}</el-menu-item>
</template>

<script>
export default {
  name: 'navItem',
  components: {

  },
  props: ['item', 'navIndex'],
  data () {
    return {
      data: {

      }
    }
  },
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'bounceInRight' : 'bounceInLeft'
    }
  }
}
</script>

<style scoped>

</style>
